<html lang="en">
<head>
    <meta name="author" content="Feiran Fu">
    <meta charset="UTF-8">
    <title>Register</title>
	<link rel="stylesheet" href="css/Ass1.css">
</head>
<body class="register-page">
    <header>
        <div class="logo">
          <img src="imgs/logo.jpg" alt="livheart logo">
        </div>
        <nav>
          <ul>
            <li><a href="index.html">HOMEPAGE</a></li>
            <li><a href="product.html">PRODUCTION</a></li>
            <li><a href="login.html">LOGIN</a></li>
            <li><a href="register.html">REGISTRATION</a></li>
            <li><a href="#">SHOPPING CART</a></li>
            <li><a href="about.html">ABOUT</a></li>
        </ul>
        </nav>
    </header>
<div class="rg_layout">
    <div class="rg_left">
        <p><strong>USER REGISTER</strong></p>
        <p><strong>New user registration</strong></p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <form action="#" id="form" method="post" onsubmit="return true">
                <table>
                    <tr>
                       <td class="td_left"><label for="username"><strong>Username</strong></label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="Enter username" οnblur="checkUsername(this.value)">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password"><strong>Password</strong></label></td>
                        <td class="td_right">
							<span class="box">
								<input type="password" name="password" id="password" placeholder="6-10 bits, >= 1 number and 1 letter"  >
								<label for="password">
                                <img src="imgs/imgclose.jpg" alt="" id= "eye1">
								</label>
							</span>
							<span id="s_password" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password2"><strong>Confirm password</strong></label></td>
                        <td class="td_right">
							<span class="box">
								<input type="password" name="password2" id="password2" placeholder="Enter password twice" >
								<label for="password2">
								<img src="imgs/imgclose.jpg" alt="" id= "eye2">
								</label>
							</span>
                            <span id="s_password2" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email"><strong>E-mail</strong></label></td>
                        <td class="td_right"><input type="text" name="email" id="email" placeholder="Enter Email-address">
                         <span id="test_email" class="error"></span>
                        </td>
                        
                    </tr>
                    
                    <tr>
                        <td colspan="2" id="td_sub">
                          <input type="submit" id="btn_sub" value="Register" onclick="checkform();" > 
                          <input type="reset" id="btn_subs" value="Reset">
                        </td>
                    </tr>
                </table>
            </form>
            <p class="para">Already have account?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="login.html">Login now</a></p>
        </div>
    </div>
</div>
<script src="js/register.js"></script>
</body>
</html>

